import React, { FC, useEffect } from 'react'
import IMSearchBar from '../../components/IMSearchBar'
import { Form, Input, Card } from 'antd'
import "./index.scss"
import { useHistory } from 'react-router-dom'
import useRequest from '../../hooks/useRequest'
import useAlbumStore from '../../store/useAlbumStore'
/**
 * 展示图片集
 * 从分类跳转 type=classify
 * 从作者跳转 type=author
 */
interface IProps {
    match?: any
}
interface Request {
    getPicsByType: (params: any) => Promise<any>
}
const Album: FC<IProps> = ({ match }) => {
    const { id, type, title } = match.params
    const { state: { page, limit, dataSource, loading }, dispatch, ActionState } = useAlbumStore()
    const request = useRequest<Request>({ modulePath: 'pic' })
    useEffect(() => {
        getPicsByType()
    }, [])
    const getPicsByType = async () => {
        dispatch({ type: ActionState.SET_LOADING, payload: true })
        try {
            const { data: { list } } = await request.getPicsByType({ page, limit, id: Number(id), type: Number(type) })
            dispatch({ type: ActionState.SET_DATASOURCE, payload: list })
        } catch (e) { } finally {
            dispatch({ type: ActionState.SET_LOADING, payload: false })

        }

    }
    return <div className="im_album">
        <IMSearchBar>
            <Form.Item label="关键字">
                <Input placeholder="请输入名称、url、作者" />
            </Form.Item>
        </IMSearchBar>
        <div className="im_album_container">
            <Card className="im_album_container_card" title={title} loading={loading}>
                <div className="container">
                    {
                        dataSource.map(item => <div className="im_album_container_card_div">
                            <img src={BASE_URL + item.img_url} alt="" />
                        </div>)
                    }

                </div>

            </Card>
        </div>
    </div>
}

export default Album